<!--
 * @Author: Bonnie
 * @Date: 2021-12-06 10:25:47
 * @LastEditTime: 2021-12-06 11:14:43
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /public_demo/src/views/dynamic_path/index.vue
-->
// img src动态
<template>
  <div class="root-container">
    <!-- 网络图片 -->
    <p>
      src 动态 网络路径
      <el-button @click="changeSrc('online')">切换</el-button>
    </p>
    <img :src="onlineSrc" />
    <!-- 本地图片 -->
    <p>
      src 动态 本地路径
      <el-button @click="changeSrc('offline')">切换</el-button>
    </p>
    <img :src="offlineSrc" />
  </div>
</template>
<script>
const ONLINE_SRC = [
  "http://touxiangkong.com/uploads/allimg/20203301301/2020/3/Vzuiy2.jpg",
  "http://touxiangkong.com/uploads/allimg/20203301301/2020/3/UbQbYn.jpg",
  "http://touxiangkong.com/uploads/allimg/20203301301/2020/3/Y3MVje.jpg",
  "http://touxiangkong.com/uploads/allimg/20203301301/2020/3/6Vz2yq.jpg",
  "http://touxiangkong.com/uploads/allimg/20203301301/2020/3/MzUfQ3.jpg",
  "http://touxiangkong.com/uploads/allimg/20203301301/2020/3/YNVjqi.jpg",
  "http://touxiangkong.com/uploads/allimg/20203301301/2020/3/aquEJb.jpg"
];

import img1 from "/public/images/1-6.jpg";
import img2 from "/public/images/2-6.jpg";
import img3 from "/public/images/3-6.jpg";
import img4 from "/public/images/4-6.jpg";
import img5 from "/public/images/dog.jpg";
const OFFLINE_SRC = [img1, img2, img3, img4, img5];
export default {
  data() {
    return {
      online: 0,
      onlineSrc: "",
      offline: 0,
      offlineSrc: ""
    };
  },
  mounted() {
    this.onlineImg();
    this.offlineImg();
  },
  methods: {
    changeSrc(type) {
      if (type == "online") {
        this.online =
          this.online + 1 <= ONLINE_SRC.length - 1 ? this.online + 1 : 0;
        this.onlineImg();
      } else {
        this.offline =
          this.offline + 1 <= OFFLINE_SRC.length - 1 ? this.offline + 1 : 0;
        this.offlineImg();
      }
    },
    onlineImg() {
      this.onlineSrc = ONLINE_SRC[this.online];
    },
    offlineImg() {
      this.offlineSrc = OFFLINE_SRC[this.offline];
    }
  }
};
</script>
<style lang='scss' scoped>
img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>